<template>
    <div class="product-image-container">
      <!-- 主图轮播区域 -->
      <el-carousel 
        :interval="5000"
        arrow="always"
        height="450px"
        ref="mainCarousel"
        indicator-position="none"
        @change="handleCarouselChange"
      >
        <el-carousel-item v-for="(img, index) in images" :key="index">
          <el-image 
            :src="fileBaseUrl() +img"
            class="main-image"
            :alt="'产品图' + (index + 1)"
            fit="cover"
          />
        </el-carousel-item>
      </el-carousel>
  
      <!-- 缩略图区域 -->
      <div class="thumbnail-wrapper">
        <div 
          v-if="images.length > visibleThumbnails"
          class="thumbnail-arrow left"
          @click="scrollThumbnails('left')"
        >
          <i class="el-icon-arrow-left"></i>
        </div>
        
        <div class="thumbnail-container">
          <div 
            class="thumbnail-list"
            :style="{ transform: `translateX(${translateX}px)` }"
          >
            <div
              v-for="(img, index) in images"
              :key="index"
              class="thumbnail-item"
              :class="{ 'active': activeIndex === index }"
              @click="switchImage(index)"
            >
              <img 
                :src="fileBaseUrl() +img"
                class="thumbnail-image"
              />
            </div>
          </div>
        </div>

        <div 
          v-if="images.length > visibleThumbnails"
          class="thumbnail-arrow right"
          @click="scrollThumbnails('right')"
        >
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, computed, onMounted, watch } from 'vue'
  import {fileBaseUrl} from '@/apis/files'

  const props = defineProps({
    images: {
      type: Array,
      default: () => []
    }
  })

  const mainCarousel = ref(null)
  const activeIndex = ref(0)
  const translateX = ref(0)
  const visibleThumbnails = ref(5)
  const thumbnailWidth = ref(90) // 缩略图宽度（含边距）
  const maxTranslate = ref(0)



  // 重置滚动位置
  const resetScrollPosition = () => {
    window.scrollTo(0, 0)
  }

  // 计算最大平移距离
  const calculateMaxTranslate = () => {
    maxTranslate.value = -(props.images.length - visibleThumbnails.value) * thumbnailWidth.value
  }

  // 切换图片
  const switchImage = (index) => {
    activeIndex.value = index
    mainCarousel.value?.setActiveItem(index)
    adjustThumbnailPosition(index)
  }

  // 处理轮播变化
  const handleCarouselChange = (index) => {
    activeIndex.value = index
    adjustThumbnailPosition(index)
  }

  // 调整缩略图位置
  const adjustThumbnailPosition = (index) => {
    const maxVisible = visibleThumbnails.value
    if (index >= maxVisible - 1) {
      const newTranslate = -thumbnailWidth.value * (index - maxVisible + 2)
      translateX.value = Math.max(maxTranslate.value, newTranslate)
    } else {
      translateX.value = 0
    }
  }

  // 滚动缩略图
  const scrollThumbnails = (direction) => {
    const step = thumbnailWidth.value
    if (direction === 'left') {
      translateX.value = Math.min(0, translateX.value + step)
    } else {
      translateX.value = Math.max(maxTranslate.value, translateX.value - step)
    }
  }

  // 监听图片数组变化
  watch(() => props.images, () => {
    calculateMaxTranslate()
  }, { immediate: true })

  // 组件挂载时重置滚动位置
  onMounted(() => {
    resetScrollPosition()
  })
  </script>
  
  <style scoped>
  .product-image-container {
    width: 350px;
    margin: 0 auto;
  }
  
  .main-image {
    width: 100%;
    height: 500px;
    object-fit: contain;
   
  }
  
  .thumbnail-wrapper {
    position: relative;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .thumbnail-container {
    width:550px;
    padding-top: 10px;
    overflow: hidden;
  }
  
  .thumbnail-list {
    display: flex;
    transition: transform 0.3s ease;
  }
  
  .thumbnail-item {
    width: 80px;
    height: 80px;
    margin-right: 10px;
    cursor: pointer;
    border: 2px solid transparent;
    position: relative;
    transition: all 0.3s;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  .thumbnail-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  }
  
  .thumbnail-item.active {
    border-color: #409EFF;
    transform: translateY(-5px);
  }
  
  .thumbnail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .thumbnail-arrow {
    width: 30px;
    height: 30px;
    background: rgba(255,255,255,0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s;
  }
  
  .thumbnail-arrow:hover {
    background: rgba(255,255,255,1);
    transform: scale(1.1);
  }
  
  .thumbnail-arrow.left {
    margin-right: 10px;
  }
  
  .thumbnail-arrow.right {
    margin-left: 10px;
  }
  
  .el-carousel__arrow {
    background-color: rgba(0,0,0,0.3);
  }
  
  .el-carousel__arrow:hover {
    background-color: rgba(0,0,0,0.5);
  }
  </style>